<!DOCTYPE html>
<html lang="en">
<head>
    <style>
    .step {
        position:relative;
        padding:10px;
        border-left:5px solid rgb(122, 197, 228);
        position:relative;
        margin-left:1em;
        padding-left:2em;
    }
    .step h2{
        border-top-right-radius: 1em;
        border-bottom-right-radius: 1em;
        border: 3px solid rgb(122, 197, 228);
        margin:0;
        text-indent:1em;
        color:rgb(122, 197, 228);
        font-weight:normal;
        font-size:1.3em;
        margin-left:-1em;
    }
    /* The Balls*/
    .step h2::before{
        content:attr(data-step-id);
        border-radius: 2em;
        background-color: rgb(122, 197, 228);
        width:2em;
        height:2em;
        display:inline-block;
        position:absolute;
        left:-1.1em;
        top:0;
        text-align:center;
        line-height:2em;
        font-size:1.2em;
        font-weight:normal;
        color: #EEEEEE;
        text-indent:0;
    }
    /* Active step: */
    .step.active h2{
        background-color:rgb(122, 197, 228);
        color:#FFFFFF;
        font-weight:bold;
    }
    .step.active h2::before{
        border-right:3px solid #FFFFFF;
    }
    /* Arrow */
    .step::before{
        content:"";
        border:0.8em solid transparent;
        border-top-color:rgb(122, 197, 228);
        border-top-width:1.5em;
        position:absolute;
        display:inline-block;
        left:-0.9em;
        bottom:-0.9em;
    }
    /* Inactive */
    .step.inactive{ border-color:#bbbbbb; }
    .step.inactive::before{ border-top-color:#bbbbbb; }
    .step.inactive h2{ color:#aaaaaa;border-color:#bbbbbb; }
    .step.inactive h2::before{background-color: #bbbbbb;}

    /* The last step: */
    [class*='step']:last-of-type{border-color:transparent;}
    [class*='step']:last-of-type::before{content:none;}

    /* ----------------------- */
    /* The button*/
    button{
        background-color:#BBBBBB;
        pointer-events: none;
        border:none;
        color:#FFFFFF;
        border-radius:5px;
        font-size:1.2em;
        padding:5px 10px;
        outline:none;
    }
    .step.active .back,
    .step.active .next{
        background-color:rgb(122, 197, 228);
        cursor:pointer;
        pointer-events: auto;
    }
    .step.inactive button{
        visibility:hidden;
    }
    button::-moz-focus-inner {border: 0;}
    /* ----------------------- */
    /* Basic page layout */
    body {
        max-width:600px;
        margin:auto;
        border:1px solid #aaa;
        padding:1em;
        font-size:1em;
        font-family:Arial,Helvetica,sans-serif;
    }
    @media all and (max-width: 400px){
        .step h2 {font-size:1.1em}
    }</style></head><body>

<div class="step active">
    <h2 data-step-id="1">Do something first</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam inventore quas, nisi cum laboriosam. Deserunt animi perferendis quidem, maxime, minima atque at est suscipit modi sit, aliquid perspiciatis! Vitae, magnam.</p>
    <button class="next">Next</button>
</div>
<div class="step inactive">
    <h2 data-step-id="2">Then do this</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam inventore quas, nisi cum laboriosam. Deserunt animi perferendis quidem, maxime, minima atque at est suscipit modi sit, aliquid perspiciatis! Vitae, magnam.</p>
    <button class="back">Back</button>
    <button class="next">Next</button>
</div>
<div class="step inactive">
    <h2 data-step-id="3">Almost there</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam inventore quas, nisi cum laboriosam. Deserunt animi perferendis quidem, maxime, minima atque at est suscipit modi sit, aliquid perspiciatis! Vitae, magnam.</p>
    <button class="back">Back</button>
    <button class="next">Next</button>
</div>
<div class="step inactive">
    <h2 data-step-id="4">Complete it now</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam inventore quas, nisi cum laboriosam. Deserunt animi perferendis quidem, maxime, minima atque at est suscipit modi sit, aliquid perspiciatis! Vitae, magnam.</p>
    <button class="back">Back</button>
    <button class="next">Finish</button>
</div>
<div class="step inactive">
    <h2 data-step-id="✓">Done!</h2>
    <p>Congratulations! You completed all steps.</p>
</div>
<script src="//static.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js" class="inactive"></script><script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" class="inactive"></script>
<script class="inactive">// JS for setting the "active" step class

// 'Next' buttons:
$(".next").click(function(){
    var oParent = $(this).closest(".step");
    setActiveStep(oParent.next());
});

// 'Back' buttons:
$(".back").click(function(){
    var oParent = $(this).closest(".step");
    setActiveStep(oParent.prev());
});


function setActiveStep(p_oDiv){

    // Set styles:
    $(".step.active").removeClass("active");
    $(".step.inactive").removeClass("inactive");
    $(p_oDiv).addClass("active");
    $(p_oDiv).nextAll().addClass("inactive");

    // Scroll to active step:
    $('html, body').animate({
        scrollTop: $(p_oDiv).offset().top
    }, 500);
}

//Init the first step:
setActiveStep($(".step")[0]);
//# sourceURL=pen.js
</script>
</body>
</html>